<template>
    <div class="back-tpl" :style="{'background':bgcolor}">
        <button type="button" v-if="back" class="back" @click="$router.back()"><i :style="{'color':backcolor}" class="iconfont icon-zuo"></i></button>
        <span class="text">{{title}}</span>
        <slot></slot>
    </div>
</template>


<style lang="stylus">
.back-tpl{
    width 100%
    height 50px
    // background-image: linear-gradient(to right , #3b79e7, #3563db);
    color #333
    text-align center
    position relative
    line-height 50px
    border-bottom 1px solid #eee
    position absolute
    top 0
    left 0
	z-index:1;
    .back{
        position absolute
        top 0
        left 0
        width 50px
        height 50px
        i{
            color #333
            font-size 26px
        }
    }
    .text{
        font-size 16px
        font-weight 600
    }
    .tool{
        font-size 14px
        position absolute
        top 0
        right 10px
        color #3563db
    }
}
</style>

<script>
export default {
    props:{
        back:{
            type:Boolean,
            default:true
        },
        title:{ 
            type:String
        },
        bgcolor:{
            type:String,
            default:'#fff'
        },
        backcolor:{
            type:String,
            default:'#3d81cb'
        },
    },
}
</script>
